<script setup>
import { ref } from 'vue';
import Dialog from '../Dialog.vue';

// 模拟活动资讯数据，每个条目添加 isTop 状态
const activityList = ref([
  {
    id: 24,
    title: '比亚迪宋Pro配置曝光',
    intro: '比亚迪宋Pro配置曝光 智能配置又加码',
    viewCount: 73,
    interest: 2,
    sort: 9,
    activityTime: '2019-05-09 16:04:49',
    addTime: '2019-05-09 16:04:49',
    isTop: true, 
    content: '比亚迪宋Pro相关配置详细曝光，智能配置全面升级，为用户带来更出色的驾驶体验。',
    imageUrl: '' // 可根据实际情况设置图片地址
  },
  {
    id: 20,
    title: '如何买车才能省钱又省心？',
    intro: '国六来了，如何买车才能省钱又省心？',
    viewCount: 516,
    interest: 5,
    sort: 0,
    activityTime: '2019.06.18 - 2019.06.28',
    addTime: '2019-05-09 13:51:49',
    isTop: false, 
    content: '国六标准实施后，购车如何做到既省钱又省心，这里为你详细分析购车要点与技巧。',
    imageUrl: ''
  },
  {
    id: 27,
    title: 'RDX精致豪华，雄心匹配',
    intro: '超大尺寸全景天窗',
    viewCount: 787,
    interest: 5,
    sort: 0,
    activityTime: '2020.04.13 - 2020.04.30',
    addTime: '2020-04-13 12:23:12',
    isTop: false, 
    content: 'RDX车型以精致豪华的内饰和超大尺寸全景天窗为亮点，展现出强大的产品竞争力。',
    imageUrl: ''
  },
  {
    id: 26,
    title: '测试活动时间',
    intro: '测试活动时间',
    viewCount: 221,
    interest: 1,
    sort: 1,
    activityTime: '2019.06.18 - 2019.06.30',
    addTime: '2019-06-18 15:02:32',
    isTop: false, 
    content: '本次测试活动的具体时间安排，以及活动流程等相关信息介绍。',
    imageUrl: ''
  },
  {
    id: 25,
    title: '林肯航海家售39.88万',
    intro: '林肯航海家售39.88万 有限欲购从速',
    viewCount: 106,
    interest: 1,
    sort: 8,
    activityTime: '2019-05-09 16:04:49',
    addTime: '2019-05-09 16:07:16',
    isTop: false, 
    content: '林肯航海家售价39.88万，车型配置丰富，数量有限，有购车意向的客户请尽快行动。',
    imageUrl: ''
  },
  {
    id: 23,
    title: '长城1季度财报解读',
    intro: '不是以价换量这么简单 长城1季度财报解读',
    viewCount: 99,
    interest: 2,
    sort: 4,
    activityTime: '2019-05-09 16:04:49',
    addTime: '2019-05-09 13:59:46',
    isTop: false, 
    content: '对长城汽车第一季度财报进行深入解读，分析其业绩表现与市场策略，并非简单的以价换量。',
    imageUrl: ''
  },
]);

// 处理置顶/取消置顶切换
const handlePin = (row) => {
  row.isTop = !row.isTop; 
};

// 定义弹窗状态和编辑项
const dialogVisible = ref(false);
const editItem = ref(null);

// 打开编辑对话框并传递当前行数据
const handleEdit = (row) => {
  editItem.value = { ...row }; 
  dialogVisible.value = true;
};

// 关闭对话框
const handleClose = () => {
  dialogVisible.value = false;
  editItem.value = null;
};
</script>

<template>
  <div class="box">
    <!-- 操作按钮区 -->
    <div class="action-buttons">
      <button @click="handleSearch" class="icon-btn">
        <img src="../../../public/img/sousuo.png" alt="搜索图标" class="btn-icon">
        <span>搜索</span>
      </button>
      <button @click="dialogVisible = true; editItem = null" class="icon-btn">
        <img src="../../../public/img/jiahao.png" alt="添加图标" class="btn-icon">
        <span>添加</span>
      </button>
      <button @click="handleDelete" class="icon-btn">
        <img src="../../../public/img/chahao.png" alt="删除图标" class="btn-icon">
        <span>删除</span>
      </button>
      <button @click="handleTop" class="icon-btn">
        <img src="../../../public/img/chahao.png" alt="置顶图标" class="btn-icon">
        <span>置顶</span>
      </button>
    </div>
    <!-- 表格 -->
    <el-table
      ref="multipleTableRef"
      :data="activityList"
      row-key="id"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" :selectable="selectable" width="55" />
      <el-table-column property="id" label="编号" width="55" />
      <el-table-column property="title" label="标题" width="160" />
      <el-table-column property="intro" label="介绍" width="170" />
      <el-table-column property="viewCount" label="浏览量" width="80" />
      <el-table-column property="interest" label="感兴趣" width="80" />
      <el-table-column property="sort" label="排序" width="55" />
      <el-table-column property="activityTime" label="活动时间" width="120" />
      <el-table-column property="addTime" label="添加时间" width="120" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button class="icon-btn" @click="handleEdit(scope.row)">
            <img src="../../../public/img/bianji.png" alt="编辑图标" class="btn-icon">
            <span>编辑</span>
          </el-button>
          <el-button class="icon-btn" @click="handlePin(scope.row)">
            <img src="../../../public/img/chahao.png" alt="取消置顶图标" class="btn-icon">
            <span>{{ scope.row.isTop ? '取消置顶' : '置顶' }}</span>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      v-model="dialogVisible"
      :title="editItem ? '活动管理/编辑文章' : '活动管理/添加文章'"
      width="30%"
      :before-close="handleClose"
    >
      <Dialog :edit-data="editItem" />
    </el-dialog>
  </div>
</template>

<style scoped>
/* 全局盒子 */
.box {
  width: 100%;
}
/* 按钮样式 */
.btn {
  border: 0;
  border-color: rgb(255, 255, 255);
  width: 70px;
  height: 20px;
  color: gray;
}

.action-buttons {
  margin-bottom: 16px;
  display: flex;
}

.action-buttons .icon-btn {
  margin-right: 8px;
  cursor: pointer;
  border: none;
  color: white;
  width: 80px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #a61c1c;
  border-radius: 2px;
  font-size: 14px;
}
.action-buttons .btn-icon {
  width: 16px;
  height: 16px;
  margin-right: 5px;
}
</style>